/* eslint-disable semi */
import { Button, Col, Row } from 'reactstrap'

import { Icon } from '@iconify/react'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { getAllStripeCardAction } from '../../../redux/stripe/stripeAction'
import PaymentModalBox from '../../modal/PaymentModalBox'
import PaymentElementsWrapper from '../../modal/PaymentElementsWrapper'

const BillingHeader = () => {
  const dispatch = useDispatch()
  const [basicModal, setBasicModal] = useState(false)
  return (
    <>
      <div className="billingHeader ">
        <Row>
          <Col lg={4} md={4}></Col>
          <Col sm={12} md={8} lg={8} xs={12}>
            <div className="billing-header-btn ">
              <div className=" billingBtnDiv ">
                <Button
                  size="sm"
                  className="billingEditBtn "
                  onClick={() => {
                    dispatch(getAllStripeCardAction())
                    setBasicModal(!basicModal)
                  }}
                >
                  <Icon icon="ic:round-add" width="17" height="17" />
                  <span>Payment Method</span>
                </Button>
              </div>
              {/* <div className=" text-center request-btn-div d-sm-none d-lg-block d-md-block">
                <Button size="sm" className="button-green">
                  Request Appointment
                </Button>
              </div> */}
            </div>
          </Col>
        </Row>
      </div>
      <PaymentElementsWrapper basicModal={basicModal} setBasicModal={setBasicModal} />
    </>
  )
}

export default BillingHeader
